<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
			border: 1px solid #ccc;
		}
		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.mainbox {
			height: 100%;
			border: 1px solid #ccc;
			padding: 20px 0;
			background: #fff;
			position: relative;
		}
		.people {
			margin-left: 40px;
		}
		.worktype {
			border: 1px solid #ccc;
			padding: 3px;
		}
		.addnew {
			border: 1px solid #ccc;
			padding: 5px 14px;
			border-radius: 4px;
			position: absolute;
			top: 20px;
			right: 20px;
			color: #fff;
		}
		.table {
			border: 1px solid #ccc;
			margin-top: 20px;
		}
		.searchbox {
			text-align: right;
		}
		.el-input--suffix {
			width: 200px;
			margin-right: 20px;
		}
		.pagenation {
			text-align: center;
			margin-top: 10px;
		}
	</style>
</block>
<block name="content">
	<div class="mainbox">
		<el-tabs v-model="workertype" type="card">
			<el-tab-pane label="全部工作人员" name="all">
				<div class="searchbox">
					<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeParam" v-model="param.key">
						<i slot="suffix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
				<div class="table">
					<el-table :data="tableData" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}">
						<el-table-column prop="nickname" label="姓名"></el-table-column>
						<el-table-column prop="username" label="账号"></el-table-column>
						<el-table-column prop="role_name" label="账号类型"></el-table-column>
						<el-table-column prop="last_logined_at" :formatter="dateFormat" label="最后登录时间"></el-table-column>
						<el-table-column prop="option" label="操作">
							<template slot-scope="scope">
								<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toDetail(scope.row.id)">查看</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="pagenation">
					<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
								   @current-change="handleCurrentChange" :page-size="param.size" :total="total"></el-pagination>
				</div>
			</el-tab-pane>
			<el-tab-pane label="超级管理员" name="super">
				<div class="searchbox">
					<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeAdminParam" v-model="adminParam.key">
						<i slot="suffix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
				<div class="table">
					<el-table :data="adminTableData" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}"  >
						<el-table-column prop="nickname" label="姓名"></el-table-column>
						<el-table-column prop="username" label="账号"></el-table-column>
						<el-table-column prop="role_name" label="账号类型"></el-table-column>
						<el-table-column prop="last_logined_at" :formatter="dateFormat" label="最后登录时间"></el-table-column>
						<el-table-column prop="option" label="操作">
							<template slot-scope="scope">
								<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toDetail(scope.row.id)">查看</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="pagenation">
					<el-pagination background layout="prev, pager, next" @size-change="handleAdminSizeChange"
								   @current-change="handleAdminCurrentChange" :page-size="adminParam.size" :total="adminTotal"></el-pagination>
				</div>
			</el-tab-pane>
			<el-tab-pane label="项目负责人" name="manager">
				<div class="searchbox">
					<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeManagerParam" v-model="managerParam.key">
						<i slot="suffix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
				<div class="table">
					<el-table :data="managerTableData" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}"  >
						<el-table-column prop="nickname" label="姓名"></el-table-column>
						<el-table-column prop="username" label="账号"></el-table-column>
						<el-table-column prop="role_name" label="账号类型"></el-table-column>
						<el-table-column prop="last_logined_at" :formatter="dateFormat" label="最后登录时间"></el-table-column>
						<el-table-column prop="option" label="操作">
							<template slot-scope="scope">
								<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toDetail(scope.row.id)">查看</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="pagenation">
					<el-pagination background layout="prev, pager, next" @size-change="handleManagerSizeChange"
								   @current-change="handleManagerCurrentChange" :page-size="managerParam.size" :total="managerTotal"></el-pagination>
				</div>
			</el-tab-pane>
			<el-tab-pane label="财务人员" name="finace">
				<div class="searchbox">
					<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeFinanceParam" v-model="financeParam.key">
						<i slot="suffix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
				<div class="table">
					<el-table :data="financeTableData" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}"  >
						<el-table-column prop="nickname" label="姓名"></el-table-column>
						<el-table-column prop="username" label="账号"></el-table-column>
						<el-table-column prop="role_name" label="账号类型"></el-table-column>
						<el-table-column prop="last_logined_at" :formatter="dateFormat" label="最后登录时间"></el-table-column>
						<el-table-column prop="option" label="操作">
							<template slot-scope="scope">
								<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toDetail(scope.row.id)">查看</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="pagenation">
					<el-pagination background layout="prev, pager, next" @size-change="handleFinanceSizeChange"
								   @current-change="handleFinanceCurrentChange" :page-size="financeParam.size" :total="financeTotal"></el-pagination>
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-button class="addnew" type="success" @click="toAddEmployee" icon="el-icon-circle-plus-outline"><!-- <i class="el-icon-circle-plus-outline" style="margin-right: 10px;"></i> -->添加人员</el-button>
	</div>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    workertype: "all",
                    searchinput1: "",
                    searchinput2: "",
                    searchinput3: "",
                    searchinput4: "",

					// 全部
                    param: {
                        key: '',
                        page: 1,
                        size: 10
                    },
                    total: 0,
                    tableData: [
                        {
                            username: "张先生",
                            mobile: "13131313131",
                            account: "1000",
                            lasttime: "2019-04-12",
                            rights: "超级管理员",
                            option: "查看"
                        },
                        {
                            username: "张先生",
                            mobile: "13131313131",
                            account: "1000",
                            lasttime: "2019-04-12",
                            rights: "项目负责人",
                            option: "查看"
                        },
                        {
                            username: "张先生",
                            mobile: "13131313131",
                            account: "1000",
                            lasttime: "2019-04-12",
                            rights: "财务人员",
                            option: "查看"
                        },
                        {
                            username: "张先生",
                            mobile: "13131313131",
                            account: "1000",
                            lasttime: "2019-04-12",
                            rights: "超级管理员",
                            option: "查看"
                        }
                    ],
					// 超级管理员
                    adminParam: {
                        status: '1',
                        key: '',
                        page: 1,
                        size: 10
                    },
                    adminTotal: 0,
                    adminTableData:[],
					// 项目负责人
                    managerParam: {
                        status: '3',
                        key: '',
                        page: 1,
                        size: 10
                    },
                    managerTotal: 0,
                    managerTableData:[],
                    // 财务
                    financeParam: {
                        status: '2',
                        key: '',
                        page: 1,
                        size: 10
                    },
                    financeTotal: 0,
                    financeTableData:[],
                }
            },
            created: function () {
                this.getData();
                this.getAdminData();
                this.getManagerData();
                this.getFinanceData();
            },
            methods: {
                // 全部
                getData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Admin/getData', _this.param, function (data) {
                        if(data.status){
                            _this.total = parseInt(data.data.count);
                            _this.tableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleSizeChange: function (size) {
                    this.param.size = size;
                    this.getData();
                },
                handleCurrentChange: function (page) {
                    this.param.page = page;
                    this.getData();
                },
                changeParam: function () {
                    this.param.page = 1;
                    this.getData();
                },
				// 超级管理员
                getAdminData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Admin/getData', _this.adminParam, function (data) {
                        if(data.status){
                            _this.adminTotal = parseInt(data.data.count);
                            _this.adminTableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleAdminSizeChange: function (size) {
                    this.adminParam.size = size;
                    this.getAdminData();
                },
                handleAdminCurrentChange: function (page) {
                    this.adminParam.page = page;
                    this.getAdminData();
                },
                changeAdminParam: function () {
                    this.adminParam.page = 1;
                    this.getAdminData();
                },
                // 项目负责人
                getManagerData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Admin/getData', _this.managerParam, function (data) {
                        if(data.status){
                            _this.managerTotal = parseInt(data.data.count);
                            _this.managerTableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleManagerSizeChange: function (size) {
                    this.managerParam.size = size;
                    this.getManagerData();
                },
                handleManagerCurrentChange: function (page) {
                    this.managerParam.page = page;
                    this.getManagerData();
                },
                changeManagerParam: function () {
                    this.managerParam.page = 1;
                    this.getManagerData();
                },
                // 财务
                getFinanceData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Admin/getData', _this.financeParam, function (data) {
                        console.log(data);
                        if(data.status){
                            _this.financeTotal = parseInt(data.data.count);
                            _this.financeTableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleFinanceSizeChange: function (size) {
                    this.financeParam.size = size;
                    this.getFinanceData();
                },
                handleFinanceCurrentChange: function (page) {
                    this.financeParam.page = page;
                    this.getFinanceData();
                },
                changeFinanceParam: function () {
                    this.financeParam.page = 1;
                    this.getFinanceData();
                },


                toDetail(id) {
                    window.location.href = HOME_URL + "/orderAdmin/Admin/editother?id=" + id;
                },
                toAddEmployee() {
                    window.location.href = HOME_URL + "/orderAdmin/Admin/addemployee";
                },


                dateFormat(row, column, cellValue, index){
                    const daterc = row[column.property]
                    if(daterc!=null){
                        const dateMat= new Date(parseInt(daterc.replace("/Date(", "").replace(")/", ""), 10));
                        const year = dateMat.getFullYear();
                        const month = dateMat.getMonth() + 1;
                        const day = dateMat.getDate();
                        const hh = dateMat.getHours();
                        const mm = dateMat.getMinutes();
                        const ss = dateMat.getSeconds();
                        const timeFormat= year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
                        return timeFormat;
                    }
                }
            }
        });
	</script>
</block>
